<template>
	<div class="back_contain_n mine-account">

		<div class="mainTable">
			<!-- 头部搜索 -->
			<div class="Search_Top_Part">
				<div class="search_list">
					<div>
						<div class="input_flex daterange">
							<el-date-picker v-model="time" :picker-options="pickerOptions" type="daterange"
								range-separator="-" start-placeholder="派单日期" end-placeholder="结束日期">
							</el-date-picker>
						</div>
						<div class="input_flex">
							<el-input clearable v-model="queryForm.customer" placeholder="客户"></el-input>
						</div>
						<div class="input_flex">
							<el-input clearable v-model="queryForm.processCategory" placeholder="品类"></el-input>
						</div>


					</div>
				</div>
				<div class="search_bt">
					<span class="zll-search" @click="getList">搜索</span>
					<span class="zll-search-reset" @click="searchReset()">重置</span>
				</div>

			</div>
			<div class="info">
				<div  @click="exportExcel" class="download"><i class="el-icon-download"></i> 下载</div>
			</div>
			<div class="input_flex">
				<span class="search_left">订单总数：</span><span>{{qualityData}}</span>
			</div>
			<!-- table -->
			<sys-table class="m_table" ref="systable" :isMultipleSelection="false" :tableData="tableData"
				:tableLoading="tableLoading" :tableHeader="tableHeader" :scopeWidth="120" :backCount="backCount"
				@getBackData="getList" :isOperate="false">

			</sys-table>

		</div>
		<form action="/api/jinl/orderOut/exportShippingDetail" method="post"
			  style="display: none;" ref="downloadContentFile" >
			<input name="queryJson" :value="queryJson"/>
		</form>
	</div>
</template>

<script>
	import { formatDate } from "@/plugins/formatDate";
	import { getStore } from "@/plugins/localStore";

	export default {
		data() {
			return {
				queryJson:'',

				tableLoading: true, //table刷新

				queryForm: {
					customer: '',
					processCategory: ''
				},
				backCount: 0,
				tableData: [],
				tableHeader: [],

				time: [],
				pickerOptions: {
					onPick: ({ minDate }) => {
						this.minDate = minDate
					},
					disabledDate: (time) => {
						if (this.minDate) {
							const oneYear = 365 * 24 * 60 * 60 * 1000
							return time.getTime() < this.minDate.getTime() ||
								time.getTime() > this.minDate.getTime() + oneYear
						}
						return false
					}
				}
			};
		},
		methods: {


			getOrderData() {
				let self = this;
				self.tableLoading = true;
				let param = Object.assign({}, self.queryForm);
				self.$http({
					url: "/jinl/order/getOrderCount",
					method: "post",
					data: JSON.stringify(param),
				}).then(resp => {
					if (resp.success) {
						console.log(resp.result);
						self.tableLoading = false;
						self.qualityData = resp.result[0].count;
					}
				});
			},

			getList(startIndex, pageRow) {
				let self = this;
				self.tableLoading = true;
				if (this.time && this.time.length == 2) {
					//date类型
					self.queryForm.startTime = formatDate(new Date(self.time[0]), 'yyyy-MM-dd')
					self.queryForm.endTime = formatDate(new Date(self.time[1]), 'yyyy-MM-dd') + ' 23:59:59'
				} else {
					self.queryForm.startTime = ''
					self.queryForm.endTime = ''
				}
				let pageInfo = self.$refs.systable.getPageInfo(startIndex);
				if (pageInfo.pageNum == 0 || startIndex == 0) {
					self.$refs.systable.resetPage();
				}
				self.queryForm.startIndex = pageInfo.pageNum;
				self.queryForm.totalPage = pageInfo.pageSize;
				let param = Object.assign({}, self.queryForm);
				param.orderOutStatus = self.viewType;
				self.$http({
					url: "/jinl/orderOut/getShippingDetailsList",
					method: "post",
					params: param
				}).then(resp => {
					if (resp.success) {
						self.tableLoading = false;
						self.tableData = resp.result;
						self.tableHeader = [
							{ "columnValue": "orderOutTime", "columnName": "派单日期" },
							{ "columnValue": "orderOutCode", "columnName": "发货单号" },
							{ "columnValue": "customer", "columnName": "客户" },
							{ "columnValue": "orderCount", "columnName": "产品数量" },
							{ "columnValue": "gradeValue", "columnName": "规格" },
							{ "columnValue": "itemTypeId", "columnName": "品类" },
						];

						if (resp.result.length > 0) {
							self.backCount = resp.result[0].count;
						} else {
							self.backCount = 0;
						}

					}
				});

			},

			exportExcel(){
				let user = getStore();
				let self = this;
				let queryForm = {
					itemId: this.queryForm.processCategory,
					name:user.userName,
					customer:this.queryForm.customer,
				};
				queryForm.name = encodeURIComponent(queryForm.name);
				queryForm.itemId = encodeURIComponent(queryForm.itemId);
				queryForm.customer = encodeURIComponent(queryForm.customer);
				self.queryJson = JSON.stringify(queryForm);
				self.$nextTick(() => {
					self.$refs.downloadContentFile.submit();
				})
			},
			searchReset() { //重置搜索
				this.queryForm = {
					customer: '',
					processCategory: ''
				};
				this.time = [];
				this.getList();
				this.getOrderData();
			},
		},
		mounted() {
			let self = this;
			self.getList();//显示table
			self.getOrderData();//显示table

		},

	};
</script>

<style lang="scss" scoped>
	@import "@/style/SearchTop.scss";

	.mine-account {
		.leftList {
			display: flex;
			margin-bottom: 15px;

			li {
				list-style: none;
				width: 100px;
				height: 30px;
				line-height: 28px;
				border-bottom: 1px solid #fff;
				color: #333;
				text-align: center;
				cursor: pointer;
				margin-bottom: 10px;
				transition: all .5s;
				position: relative;
				display: flex;
				justify-content: center;

				&.active {
					color: #ff9935;
					border-color: #ff9935;
					position: relative;
					font-weight: 600;
					font-size: 14px;
				}

				.nums {
					position: absolute;
					right: 5px;
					top: 0;
					background: #f44336;
					color: #fff;
					height: 16px;
					line-height: 16px;
					font-weight: 400;
					border-radius: 8px;
					font-size: 12px;
					padding: 0 5px;
				}
			}
		}
	}
	.download {
		background: #67C23A;
		border: 1px solid #67C23A;
		color: #ffffff;
		border-radius: 5px;
		text-align: center;
		display: inline-block;
		height: 26px;
		line-height: 26px;
		padding: 0 10px;
		cursor: pointer;
		width: 80px;
		border-radius: 20px;
		margin-bottom: 10px;
		&:hover {
			transition: all .3s;
			opacity: .8;
		}
		

	}
</style>